<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('导入表')"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action=""  lay-filter="val-filter" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据源</label>
                        <div class="layui-input-block">
                            <select name="datasource" lay-verify="required" id="datasource" lay-filter="datasource" lay-search>
                                <option value="0">请选择数据源</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-col-md8">
        <div class="layui-card">
            <div class="layui-card-header">
                所有表
            </div>
            <div class="layui-card-body" style="padding: 25px;">
                <table id="source-table" lay-filter="source-table"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    let prefix = "/generate";
    layui.use(['common', 'jquery','util','button','http'], function () {
        let $ = layui.jquery,
            form = layui.form;
        let table = layui.table;
        let util = layui.util;
        let http = layui.http;
        var datasourceId = 0

        http.post("/datasource/page",{page:1,limit:10}).then(res=>{
            for (const item of res.data) {
                $('#datasource').append(new Option(item.connName,item.id));// 下拉菜单里添加元素
            }
            form.render("select");//重新渲染 固定写法
        })

        form.on('select(datasource)', function (data) {
            if(data.value === '0'){
                return
            }
            datasourceId = data.value
            // 获取数据源下的表
            table.reload('source-table', {
                where: data.field,
                url: "/datasource/table/list/"+data.value,
            })
            return false;
        });

        let cols = [
            [{
                type: 'checkbox'
            },
            {
                title: '表名',
                field: 'tableName',
                align: 'center',
            },
            {
                title: '描述',
                field: 'tableComment',
                align: 'center'
            }]];
        var tableId = 'source-table'
        table.render({
            elem: '#source-table',
            id: tableId,
            page: true,
            data:[],
            cols: cols,
            skin: 'line',
            text: {none: '暂无信息'},
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            parseData: function(res){ // res 即为原始返回的数据
                if(!res.success){
                    layer.msg(res.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });

        window.getSelected = function (){
            let selected = table.checkStatus('source-table').data;
            if (selected.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            let tables = []
            for (let item of selected) {
                tables.push(item.tableName)
            }
            return {datasourceId:datasourceId,tabs:tables}
        }

        util.on({
            btnSave:function (){
            },
        })
    })
</script>
</body>
</html>